<template>
    <div class="page-partner-team">
        <CommonNav v-model="nav" :navs="navs"></CommonNav>
        <div class="border-bottom"></div>
        <div class="header white-color pink_bg font-bold"  v-if="nav === 'team' && teamStatisticsCurrency">
            <div class="item text-center">
                <div class="price">
                    <span class="text-banner">{{teamStatisticsCurrency.money}}</span>
                    <span v-if="teamStatistics.money > 1000000" class="tips">万</span>
                </div>
                <div class="text-normal">团队业绩</div>
            </div>
            <div class="item text-center">
                <div class="price">
                    <span class="text-banner">{{teamStatisticsCurrency.rebate}}</span>
                    <span v-if="teamStatistics.rebate > 1000000" class="tips">万</span>
                </div>
                <div class="text-normal">团队收入</div>
            </div>
            <div class="item text-center">
                <div class="price">
                    <span class="text-banner">{{teamStatisticsCurrency.order_number}}</span>
                    <span v-if="teamStatistics.order_number > 10000" class="tips">万</span>
                </div>
                <div class="text-normal">团队订单</div>
            </div>
        </div>
        <div class="team-info-wrap" v-if="nav === 'team'">
            <div class="search-wrap">
                 <div class="people-search">
                    <div class="people-picker-box">
                        <input class="picker text-left" placeholder="搜索合伙人" :disabled="isDisabled" v-model.trim="searchName"/>
                    </div>
                </div>
                <div class="btn btn-mobile btn-white btn-normal fourth-border" style="padding: 16rpx 24rpx;border:1rpx solid #D0A7AB;color:#D0A7AB;" @click="getList(true)">搜索</div>
            </div>
            <!-- <div class="total">总人数：{{userInvitedList.total}}人</div> -->
            <div class="inner-box" v-if="userInvitedListCurrency.length">
                <div class="item text-huge position-relative" v-for="(item, index) in userInvitedListCurrency" :key="index" @click="onClickTeamMember(item)">
                    <div class="info">
                        <div class="avatar">
                            <img :src="item.avatar" v-if="item.avatar" mode="aspectFill" />
                            <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                        </div>
                        <div class="name">
                            <div class="text-normal">{{item.nickname ? item.nickname : '用户未授权'}}</div>
                            <div class="info_price">￥ <span class="price_num"> {{item.rebate}}</span></div>
                            <div class="info__mobile"><span v-if="item.mobile" @click.stop="makeCall(item.mobile)">电话：<span class="">{{item.mobile}}</span></span></div>
                        </div>
						<!-- <span v-if="item.mobile" class="roc__mobile fr" @click="makeCall(item.mobile)">
						    <div class="roc__mobile-inner">
						        <span class="roc__mobile-text">
						            <i class="icon">&#xe725;</i>
						            CALL
						        </span>
						    </div>
						</span> -->
                    </div>
                    <div class="price">
                        <div class="comment info_bg_bl mr-left-10" @click.stop="makeCall(item.mobile)">
                            <div class="comment_img info_bg_gr">
                                <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/2_1.png" class="phone_img_icon2" alt="" />
                            </div>
                            <div class="comment_con padding_le_10 phone_white">CALL</div>
                        </div>
                    </div>
                </div>
            </div>
            <ListEmpty v-else />
        </div>
        <div class="record-box" v-else-if="nav === 'record' && formateTeamOrderList.length">
            <div class="item text-huge position-relative" v-for="(item, index) in formateTeamOrderList" :key="index">
                <div class="info">
                    <div class="avatar">
                        <img :src="item.avatar" v-if="item.avatar" mode="aspectFill" />
                        <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                    </div>
                    <div class="good-info">
                        <div class="name normal-text">{{item.order_name}}</div>
                        <div class="title grey-color small-text">{{item.title}} ¥{{item.price}}</div>
                        <div class="title grey-color small-text">{{item.createdTime}} {{item.shop}}</div>
                    </div>
                </div>
                <div class="referrer-box normal-text">
                    <div class="referrer">推荐人：{{item.referrer}}</div>
                    <div>他的返利：<span class="red-color">{{item.rebate}}元</span></div>
                </div>
            </div>
        </div>
        <div class="rank-box" v-else-if="nav === 'board'">
            <CommonNav v-model="rankNav" :navs="rankNavs"></CommonNav>
            <div class="border-bottom"></div>
            <div class="date-select-box">
                <ZbSelect v-model="selectedDateType" type="mini" :options="dateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#f4051a" selected-bg="#f4051a" />
            </div>
            <block v-if="rankList.length">
                <div class="rank-item text-huge position-relative after-line" v-for="(item, index) in rankList" :key="index">
                    <div class="info">
                        <div class="avatar">
                            <img :src="item.avatar" v-if="item.avatar" mode="aspectFill" />
                            <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                        </div>
                        <div class="good-info">
                            <div class="name">{{item.name ? item.name : '用户未授权'}}</div>
                            <div class="rank grey-color small-text">第{{index + 1}}名</div>
                        </div>
                    </div>
                    <div class="price red-color">{{item.rebate + '元'}}</div>
                </div>
            </block>
            <ListEmpty v-else />
        </div>
        <ListEmpty v-else-if="nav !== 'board'" />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    currency,
    // dateParse,
    dateFormat,
    // dateChinaFormat,
} from '@/lib/utils';
import CommonNav from '@/components/nav/commonNav.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import ZbSelect from '@/components/common/zbSelect.vue';
import { api } from '@/lib/api';

import { Component, Vue, Watch } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'PartnerTeam',
    components: {
        CommonNav,
        ListEmpty,
        ZbSelect,
    },
})
export default class PartnerTeam extends Vue {
    public nav: 'team' | 'record' | 'board' = 'team';

    public navs: ValueText1[] = [
        { text1: '团队信息', value: 'team' },
        { text1: '成交记录', value: 'record' },
        { text1: '排行榜', value: 'board' },
    ];

    public rankNav: 'rebate' | 'sales_volume' = 'rebate';

    public rankNavs: ValueText1[] = [
        { text1: '返利排行', value: 'rebate' },
        { text1: '成交排行', value: 'sales_volume' },
    ];

    public selectedDateType: any = '年度';

    public dateTypeOptions: any = [
        '季度',
        '年度',
    ];

    public dataTypeMap: any = {
        季度: 'quarterly',
        年度: 'annual',
    };

    public searchName = '';

    public get teamStatistics() {
        return store.state.partner.teamStatistics;
    }

    public get userInvitedList() {
        return store.state.partner.userInvitedList;
    }

    public get teamOrderList() {
        return store.state.partner.teamOrderList;
    }

    public get teamRankListMap() {
        return store.state.partner.teamRankListMap;
    }

    public get rankKey() {
        return `${this.dataTypeMap[this.selectedDateType]}_${this.rankNav}`;
    }

    public get rankList() {
        return this.teamRankListMap[this.rankKey] ? this.teamRankListMap[this.rankKey].list.map((item: any) => {
            const val = JSON.parse(JSON.stringify(item));
            return Object.assign(val, {
                rebate: currency(val.score),
            });
        }) : [];
    }

    public get teamStatisticsCurrency() {
        return this.teamStatistics ? {
            money: this.teamStatistics.money > 1000000 ? currency(this.teamStatistics.money / 10000) : currency(this.teamStatistics.money),
            rebate: this.teamStatistics.rebate > 1000000 ? currency(this.teamStatistics.rebate / 10000) : currency(this.teamStatistics.rebate),
            order_number: this.teamStatistics.order_number > 10000 ? this.teamStatistics.order_number / 10000 : this.teamStatistics.order_number,
        } : null;
    }

    public get userInvitedListCurrency() {
        return this.userInvitedList && this.userInvitedList.list.length ? this.userInvitedList.list.map((item) => {
            return {
                ...item,
                rebate: currency(item.rebate),
            };
        }) : [];
    }

    public get formateTeamOrderList() {
        return this.teamOrderList.list.map((item: any) => {
            const val = JSON.parse(JSON.stringify(item));
            return Object.assign(val, {
                createdTime: dateFormat(new Date(val.created_at), 'Y.m.d H:i:s'),
                price: currency(val.price),
                rebate: currency(val.rebate),
            });
        });
    }
	
	/**
	 * 拨打电话
	 */
	public makeCall(mobile: string) {
	    wx.makePhoneCall({
	        phoneNumber: mobile,
	    });
	}

    @Watch('nav')
    public onNavChange() {
        this.getList(true);
    }

    @Watch('rankNav')
    public onRankNavChange() {
        this.getList(true);
    }

    @Watch('selectedDateType')
    public onSelectedDateTypeChange() {
        this.getList(true);
    }

    public async getList(forceUpdate = false) {
        if (this.nav === 'team') {
            await store.dispatch('partner/getUserInvitedList', {
                offset: forceUpdate ? 0 : this.userInvitedListCurrency.length,
                count: 10,
                name: this.searchName,
                forceUpdate,
            });
        }
        if (this.nav === 'record') {
            await store.dispatch('partner/getTeamOrderList', {
                offset: forceUpdate ? 0 : this.formateTeamOrderList.length,
                count: 10,
                forceUpdate,
            });
        }
        if (this.nav === 'board') {
            await store.dispatch('partner/getTeamRankList', {
                offset: forceUpdate ? 0 : this.rankList.length,
                count: 10,
                interval: this.dataTypeMap[this.selectedDateType],
                type: this.rankNav,
                forceUpdate,
            });
        }
    }
    public onClickTeamMember(item: Team.Rebate) {
        api.push({
            name: ROUTE_NAME.MEMBER_RECOMMEND_ORDER,
            params: {
                userId: item.user_id + '',
            },
        });
    }
    public async onReachBottom() {
        this.getList();
    }

    async created() {
        window.addEventListener('reachbottom', this.onReachBottom);

        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('partner/getTeamStatistics'),
            store.dispatch('partner/getUserInvitedList', {
                offset: 0,
                count: 10,
                name: '',
                forceUpdate: true,
            }),
        ]);
        store.commit('utils/endRequest');
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.pink_bg{
    background-color: #FF929D;
}
.info_bg_bl{
    background-color: #63b1fb;
}
.info_bg_gr{
    background-color: #e8e8e8;
}
.phone_white{
    color: #ffffff;
}
.padding_le_10{
    padding: 0px 10px;
}
.padding_le_14{
    padding: 0px 16px;
}
.comment{
    height: 22px;
    border-radius: 30rpx;
    
    display: flex;
    margin: 10px 0px;
}
.comment_img{
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.comment_img_icon{
    width: 12px;
    margin-left: 4px;
}
.phone_img_icon2{
    width: 22px;
}
.comment_con{
    height: 22px;
    line-height: 22px;
    font-size: 20rpx;
    text-align: center;
}

.page-partner-team {
    .border-bottom {
        padding-bottom: 16rpx;
        margin-bottom: 4rpx;
        border-bottom: 2rpx solid rgba(187, 187, 187, 1);
    }
    .header {
        display: flex;
        box-sizing: border-box;
        padding: 30px;
        .item {
            width: 100% / 3;
        }
    }
    .team-info-wrap {
        // margin-top: 40rpx;
        background-color: #F8F8F8;
        border-radius: 10rpx;
        .total {
            padding: 10px 30rpx;
        }
    }
    .inner-box {
        width: 346px;
        margin: 0 auto;
        border-radius: 10rpx;
        // background-color: #f8f8f8;
        background-color: #ffffff;
        .item_bottom_border{
            position: absolute;
            bottom: 5rpx;
            right: 0rpx;
            width: 60%;
            border-bottom: 1rpx solid #E8E8E8;
        }
        .item {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 14px;
            background-color: #ffffff;
            &:not(:last-child) {
                // border-bottom: 2rpx solid #ebebeb;
                border-bottom: 2rpx solid #E8E8E8;
            }
            .info {
                display: flex;
                align-items: center;
                .info_price{
                    color: #E9AEB4;
                    font-size: 12px;
                    .price_num{
                        font-size: 16px;
                    }
                }
                &__mobile {
                    display: inline-block;
                    padding: 3px 0;
                    .text-normal();
                    font-size: 12px;
                }
            }
            .avatar {
                width: 50px;
                height: 50px;
                margin-right: 10px;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
    }
    .record-box {
        .item {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 10px 10px;
            border-bottom: 2rpx solid #ebebeb;
            .info {
                display: flex;
                align-items: center;
            }
            .good-info {
                width: 170px;
            }
            .avatar {
                width: 50px;
                height: 50px;
                margin-right: 10px;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .referrer-box {
                flex: 1;
            }
        }
    }
    .rank-box {
        width: 346px;
        margin: 18px auto 0;
        border-radius: 10rpx;
        background-color: #f8f8f8;
        .common-nav {
            background: transparent;
            .nav-item {
                border-bottom: 6rpx solid transparent;
            }
            &.red .active {
                border-bottom: 6rpx solid #F13C50;
            }
        }
        .border-bottom {
            border-bottom: 2rpx solid #ebebeb;
        }
        .date-select-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 10px;
        }
        .rank-item {
            position: relative;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 14px;
            &:not(:last-child) {
                border-bottom: 2rpx solid #ebebeb;
            }
            .info {
                display: flex;
                align-items: center;
            }
            .avatar {
                width: 50px;
                height: 50px;
                margin-right: 10px;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
    }
    .name {
        width: 160px;
    }
    .tips {
        font-size: 14px;
    }
    .text-banner {
        font-size: 54rpx;
        line-height: 42px;
    }
    .search-wrap {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 12px;
    }
    .people-search {
        position: relative;
        box-sizing: border-box;
        width: 80%;
        .people-picker-box {
            box-sizing: border-box;
            width: 100%;
            padding: 10rpx 0;
            // border: 2rpx solid #BBBBBB;
            border: 2rpx solid #707070;
            border-radius: 20rpx;
            .picker {
                position: relative;
                box-sizing: border-box;
                width: 100%;
                font-size: 30rpx;
                padding: 0 60rpx;
                &::before {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: 'iconfont';
                    content: "\e610";
                    font-size: 32rpx;
                    color: @grey-color;
                    pointer-events: none;
                }
            }
        }
    }
}

</style>
